<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="物资名称" prop="materialName">
        <el-input
          v-model="queryParams.materialName"
          placeholder="请输入物资名称"
          :clearable="true"
          @keyup.enter="getPage"
        />
      </el-form-item>
      <el-form-item label="仓库" prop="warehouseId">
        <el-select v-model="queryParams.warehouseId" placeholder="请输入仓库" :clearable="true">
          <el-option
            v-for="dict in materialWarehouse"
            :key="dict.id"
            :label="dict.warehouseName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="批次" prop="batchNo">
        <el-input
          v-model="queryParams.batchNo"
          placeholder="请输入批次"
          :clearable="true"
          @keyup.enter="getPage"
        />
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['material:stock:query']" @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="MaterialStock"
      height-per="90"
      @page-change="getPage"
    >
      <template #warehouseId="{ row }">
        {{ materialWarehouse.find((obj) => obj.id === row.warehouseId).warehouseName }}
      </template>
    </Table>
  </ContentWrap>
</template>
<script setup name="MaterialStock" lang="ts">
import * as MaterialWarehouseApi from '@/api/material/warehouse'
import * as MaterialStockApi from '@/api/material/stock'
import { formatDate } from '@/utils/formatTime'
const materialWarehouse = ref()
const queryFormRef = ref()
const queryParams = ref({
  materialName: undefined,
  warehouseId: undefined,
  batchNo: undefined
})
const queryData = ref()
const columns = [
  {
    label: '物资名称',
    prop: 'material.materialName'
  },
  {
    label: '仓库',
    prop: 'warehouseId',
    slot: 'warehouseId'
  },
  {
    label: '物资类别名称',
    prop: 'material.category.categoryName'
  },
  {
    label: '物资规格',
    prop: 'material.materialSpecification'
  },
  {
    label: '基本单位',
    prop: 'material.unit'
  },
  {
    label: '条码',
    prop: 'material.barcode'
  },
  {
    label: '销售单价',
    prop: 'material.price'
  },
  {
    label: '库存数',
    prop: 'stockNumber'
  },
  {
    label: '批次',
    prop: 'batchNo'
  },
  {
    label: '生产日期',
    prop: 'productionDate',
    formatter: ({ productionDate }) => formatDate(productionDate, 'YYYY-MM-DD')
  },
  {
    label: '有效期',
    prop: 'expireDate',
    formatter: ({ expireDate }) => formatDate(expireDate, 'YYYY-MM-DD')
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
/** 初始化 */
onMounted(async () => {
  materialWarehouse.value = await MaterialWarehouseApi.simpleList()
  getPage()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await MaterialStockApi.pageQuery(queryParams.value)
}
</script>
